<template>
  <div style="height:100%">
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
export default {
  data () {
    return {
      cdata: {}
    };
  },
  components: {
    Chart,
  },
  props: {
    info: {
      type: Object
    }
  },
  watch: {
    info: {
      handler (newVal) {
        if (newVal) {
          this.cdata = {
            yAxis: {
              type: 'category',
              data: ['退役士兵', '政策安置', '网格员']
            },
            xAxis: {
              type: 'value',
              name: '（人）'
            },
            tooltip: {
              trigger: "axis",
              backgroundColor: "rgba(255,255,255,0.1)",
              axisPointer: {
                type: "shadow",
                label: {
                  show: true,
                  backgroundColor: "#7B7DDC"
                }
              }
            },
            grid: {
              x: "15%",
              y: "10%",
              x2: "15%",
              y2: '15%'
            },
            series: [
              {
                name: '特殊人群',
                type: 'bar',
                barWidth: 20,//柱图宽度
                data: [
                  {
                    value: newVal.tuiyi,
                    itemStyle: {
                      color: '#ff9f7f',
                    }
                  },
                  {
                    value: newVal.zhengce,
                    itemStyle: {
                      color: '#e7bcf3',
                    }
                  }, {
                    value: newVal.wangge,
                    itemStyle: {
                      color: '#ffdb5c',
                    }
                  }
                ],
                label: {
                  show: true,
                  fontSize:16,
                  formatter: '{c}人',
                  position: 'right'
                },
                itemStyle: {
                  //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                  normal: {
                    //柱形图圆角，初始化效果
                    barBorderRadius: [0, 5, 5, 0]
                  }
                },
                barGap: '1%'
              }
            ]
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
  },
  methods: {
  }
};
</script>

<style lang="scss" scoped>
</style>